window.onload = function() {
  /*** JS TRANSFORMS ***/
  //META FOR MEDIA-SCREEN 
  var viewPortTag=document.createElement('meta');
  viewPortTag.id="viewport";
  viewPortTag.name = "viewport";
  viewPortTag.content = "width=device-width, initial-scale=1, maximum-scale=1";
  document.getElementsByTagName('head')[0].appendChild(viewPortTag);

  //TRANSITIONS
  var stamps_transform = styleSupport( "transform" );

  var stamps_transition = styleSupport( "transition" ),
    stamps_duration = stamps_transition+'-duration',
    stamps_timing = stamps_transition+'-timing-function',
    stamps_delay = stamps_transition+'-delay';;

  function styleSupport( prop ) {
    var vendorProp, supportedProp,
    capProp = prop.charAt(0).toUpperCase() + prop.slice(1),
    prefixes = [ "Moz", "Webkit", "O", "ms" ],
    newprefixes = [ "-moz-", "-webkit-", "-o-", "-ms-" ],
    div = document.createElement( "div" );

    if ( prop in div.style ) {
      supportedProp = prop;
    } else {
      for ( var i = 0; i < prefixes.length; i++ ) {
        vendorProp = prefixes[i] + capProp;
        if ( vendorProp in div.style ) {
          supportedProp = newprefixes[i]+prop;
          break;
        }
      }
    }

    div = null;
    return supportedProp;
  }

  setDuration = function(the, time) {
    the.style[stamps_duration] = time+'ms';
  }

  getDuration = function(the) {
    return the.style[stamps_duration];
  }

  setTiming = function(the,timing) {
    the.style[stamps_timing] = timing;
  }

  getTiming = function(the) {
    return the.style[stamps_timing];
  }

  setDelay = function(the,delay) {
    the.style[stamps_delay] = delay+'ms';
  }

  getDelay = function(the) {
    return the.style[stamps_delay];
  }

  setTransform = function(the,scale,rotate) {
    var value = scale != undefined ? 'scale('+scale+') ' : '';
    value += rotate != undefined ? 'rotate('+rotate+'deg)' : '';
    the.style[stamps_transform] = value;
  }
  //END


  var Stamp = function(element) {
    this.element = element;
    this.delay = 0;
    this.duration = 500;
    this.definedTiming = 'linear';
    this.customTiming = '';
    this.testStamp = function(){};
    this.currentScale = 1;
    this.endScale = 0;
    this.currentRotate = undefined;
    this.endRotate = 0;
    this.currentOpacity = 1;
    this.endOpacity = 1;
    this.isAnimated = false;

    this.setDuration = function(time) {
      setDuration(this.element,time);
    }

    this.getDuration = function() {
      return getDuration(this.element);
    }

    this.setTiming = function(timing) {
      setTiming(this.element,timing);
    }

    this.getTiming = function() {
      return getTiming(this.element);
    }

    this.setDelay = function(delay) {
      this.delay = delay;
    }

    this.getDelay = function() {
      return this.delay;
    }

    this.setOpacity = function(opacity) {
       this.element.style.opacity = opacity;
    }

    this.getOpacity = function() {
      return this.element.style.opacity;
    }

    this.setTransform = function(type) {
      var cScale = this.currentScale, cRotate = this.currentRotate;

      if (!!type && type === 'end') {
        cScale = this.endScale;
        cRotate = this.endRotate;
      }
      setTransform(this.element,cScale,cRotate);
    }

    this.resetScale = function(scale) {
      this.currentScale = scale;
    }

    this.resetRotate = function(rotate) {
      this.currentRotate = rotate;
    }

    this.resetOpacity = function(opacity) {
      this.currentOpacity = opacity;
    }

    this.setCurrentScale = function(scale) {
      this.currentScale = scale;
      this.setTransform();
    }

    this.setCurrentRotate = function(rotate) {
      this.currentRotate = rotate;
      this.setTransform();
    }

    this.setCurrentOpacity = function(opacity) {
      this.currentOpacity = opacity;
      this.setOpacity(opacity);
    }

    this.setEndScale = function(scale) {
      this.endScale = scale;
      this.setTransform('end');
    }

    this.setEndRotate = function(rotate) {
      this.endRotate = rotate;
      this.setTransform('end');
    }

    this.setEndOpacity = function(opacity) {
      this.endOpacity = opacity;
      this.setOpacity(opacity);
    }

    this.start = function() {
      var obj = this;
      obj.isAnimated = true;
      var duration = parseInt(obj.getDuration());
      var startTime = obj.getDelay();
      var currentScale = obj.currentScale;
      var currentRotate = obj.currentRotate;
      var currentOpacity = obj.currentOpacity;
      obj.setDuration(0);

      obj.setCurrentScale(currentScale);
      obj.setCurrentRotate(currentRotate);
      obj.setCurrentOpacity(currentOpacity);
      setTimeout(bump,startTime+duration+100,false)
      setTimeout(go,startTime+200,false);

      function bump() {
        PASS.classList.add('bump');
        setTimeout(function(){
          PASS.classList.remove('bump');
        },100);
      }

      function go() {
        obj.setDuration(duration);
        obj.setCurrentScale(obj.endScale);
        obj.setCurrentRotate(obj.endRotate);
        obj.setCurrentOpacity(obj.endOpacity);

        var resetValues = function() {
          obj.resetScale(currentScale);
          obj.resetRotate(currentRotate);
          obj.resetOpacity(currentOpacity);
          obj.isAnimated = false;
          obj.element.removeEventListener('webkitTransitionEnd',resetValues, false );
        }

        obj.element.addEventListener('webkitTransitionEnd',resetValues,false);
      }
    }
  }

  var PASS = document.getElementById('pass');

  var arrayElements = [new Stamp(document.getElementById('houston_stamp')),new Stamp(document.getElementById('phoenix_stamp'))];

  getSearchLocation = function(index) {
    var loc = window.location.search.replace("?","");
    console.log(loc);

    console.log(loc.split('startOpacity')[1].split('&'));
    // var delay = !!loc && loc.indexOf('delay'+index) ?
  }
  getSearchLocation();


  /*** DATA-GUI ***/
  var PassStamps = function() {
    this.delay = 0;
    this.duration = 500;
    this.definedTiming = 'linear';
    this.customTiming = '';
    this.testStamp = function(){};
    this.currentScale = 0;
    this.endScale = 1;
    this.currentRotate = 0;
    this.endRotate = 0;
    this.currentOpacity = 1;
    this.endOpacity = 1;


    this.TESTALL = function() {
      for(var i = 0; i < arrayElements.length; i++) {
        if(!!!arrayElements[i].isAnimated) {
          arrayElements[i].start();
        }
      } 
    };
  };

  var passStamps = new PassStamps();
  var gui = new dat.GUI();
  
  for(var i = 0; i < arrayElements.length; i++) {
    var obj = arrayElements[i].element;

    var f = gui.addFolder(obj.getAttribute('alt'));
    var currentFolder = f.addFolder('Current');
    var endFolder = f.addFolder('End');
    var Properties = f.addFolder('Properties');

    var delay = Properties.add(passStamps, 'delay', 0, 3000);

    var duration = Properties.add(passStamps, 'duration', 0, 3000);
    
    var definedTiming = Properties.add(passStamps, 'definedTiming', 
                  { Linear: 'linear', Ease: 'ease', EaseIn: 'ease-in',
                    EaseOut: 'ease-out', EaseInOut: 'ease-in-out', 
                    CubicBezier: 'cubic-bezier(1,-0.22,0,1.12)',
                    Quantum1: 'cubic-bezier(0.4, 0.0, 0.2, 1)',
                    Quantum2: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
                    Quantum3: 'cubic-bezier(0.4, 0.0, 1, 1)'} );

    var customTiming = Properties.add(passStamps, 'customTiming');

    var currentScale = currentFolder.add(passStamps, 'currentScale', 0, 4);
    var endScale = endFolder.add(passStamps, 'endScale', 0, 4);

    var currentRotate = currentFolder.add(passStamps, 'currentRotate', -180, 180);
    var endRotate = endFolder.add(passStamps, 'endRotate', -180, 180);

    var currentOpacity = currentFolder.add(passStamps, 'currentOpacity', 0, 1);
    var endOpacity = endFolder.add(passStamps, 'endOpacity', 0, 1);

    var test = f.add(passStamps,'testStamp');

    test.obj = currentRotate.obj = endRotate.obj = currentScale.obj = endScale.obj = currentOpacity.obj = endOpacity.obj = customTiming.obj = definedTiming.obj = duration.obj = delay.obj = arrayElements[i];

    //init
    arrayElements[i].setDelay(passStamps.delay);
    arrayElements[i].setDuration(passStamps.duration);
    arrayElements[i].setTiming(passStamps.definedTiming);
    currentRotate.obj.setCurrentRotate(passStamps.currentRotate);
    endRotate.obj.setEndRotate(passStamps.endRotate);
    currentScale.obj.setCurrentScale(passStamps.currentScale);
    endScale.obj.setEndScale(passStamps.endScale);
    currentOpacity.obj.setCurrentOpacity(passStamps.currentOpacity);
    endOpacity.obj.setEndOpacity(passStamps.endOpacity);
    //end init

    test.onChange(function(){
      if (!!!this.obj.isAnimated){
        this.obj.start();
      }  
    });

    currentRotate.onChange(function(value){
      this.obj.setCurrentRotate(value);
    });

    endRotate.onChange(function(value){
      this.obj.setEndRotate(value);
    });

    currentScale.onChange(function(value){
      this.obj.setCurrentScale(value);
    });

    endScale.onChange(function(value){
      this.obj.setEndScale(value);
    });

    currentOpacity.onChange(function(value){
      this.obj.setCurrentOpacity(value);
    });

    endOpacity.onChange(function(value){
      this.obj.setEndOpacity(value);
    });

    customTiming.onChange(function(value){
      // CHANGE CUSTOM TIMING OBJECT
      var regex = /([\d.]+,\s*){3}[\d.]+/gi;
      var match = regex.exec(value);
      if (!!match) {
        var value = match[0];
        var cubicB = 'cubic-bezier';
        value = value.indexOf(cubicB) !== -1 ? cubicB +'(' + value + ')' : value;
        this.obj.setTiming(value);
      }
    });

    definedTiming.onChange(function(value){
      this.obj.setTiming(value);
    });

    duration.onChange(function(value){
      this.obj.setDuration(value);
    });

    delay.onChange(function(value){
      this.obj.setDelay(value);
    });

  }
  gui.add(passStamps,'TESTALL');
}